<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/login.css">
</head>
<body>
  <div class="jumbotron">
    <h1>欢迎光临 BK2102 SHOP</h1>
    <div class="login">
      <form class="form-horizontal">
        <div class="form-group">
          <label for="username" class="col-sm-2 control-label">用户名</label>
          <div class="col-sm-10">
            <input name="name" type="text" class="form-control" id="username" placeholder="用户名">
          </div>
        </div>
        <div class="form-group">
          <label for="password" class="col-sm-2 control-label">密码</label>
          <div class="col-sm-10">
            <input name="pwd" type="password" class="form-control" id="password" placeholder="密码">
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
          </div>
        </div>
      </form>
    </div>

    <h3></h3>
  </div>
    <script src="../tools/jquery.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script>
      //from 表单 要给from表单 添加submit 提交事件
      //同时要组织默认事件
      $('form').submit(function(){
        //触发ajax程序 向后端 发送请求 携带账号密码
     //promise
        const p = pjQueryAjax('../server/goods_login.php','post',{ userName: $('[name="name"]').val() ,  userPwd: $('[name="pwd"]').val() },'json');
        p.then((res)=>{
          console.log(res);
            //根据响应结果给 执行不同程序
            if(res.result === 1){
              //设定cookie ，表示登录成功
              mySetCookie('login',1,7*24*60*60,'/');
              let num = 5;
              //登录成功
              $('h3').html(`登录成功，${num}秒后，跳来时页面<a href="./index.html">点击跳转首页</a>`);
             
              
              //定时器
              setInterval(function(){
                num--;
                if(num === 0){
                  //跳转页面
                  window.location.href=`${window.location.search.substr(5)}`;
                  return
                }
                $('h3').html(`登录成功，${num}秒后，跳来时页面<a href="./index.html">点击跳转首页</a>`);
                
              
              },1000)
            }else{
              //登录失败
              window.alert('账号密码，错误');
            }

        })
      
        

//阻止一切
        return false;
      })
    </script>
</body>
</html>
